<style scoped>
    .qxgl .ivu-modal .ivu-modal-body .qxglbody .ivu-row .ivu-col{
        padding: 3px 50px;
        box-shadow: 0px 0px 3px 0px #f0f0f0;
    }
    .qxgl .ivu-modal .ivu-modal-body .qxglbody .ivu-row .ivu-col .ivu-form-item{margin-bottom: 0px;}
</style>
<template>
    <div class="console-product">
        <Row class="position clearfix">
            <!-- 当前位置-->
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">权限管理</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">日志管理</span>
                </div>
            </i-col>
        </Row>
        <!--中间位置-->
        <div class="console-product-contcent" :style="{height:height +'px'}">
            <Form class="searchform" ref="logForm" :model="logForm" inline>
                <Form-item label="操作人:" prop="people" :label-width="50" style="width: 175px">
                    <Input v-model="logForm.people"></Input>
                </Form-item>
                <Form-item label="操作时间:" prop="time" :label-width="65" style="width: 265px">
                    <Date-picker type="daterange" v-model="logForm.time"  :options="time0ptions" style="width: 200px"></Date-picker>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="logSearch">搜索</Button>
                </Form-item>
            </Form>
            <Modal class-name="popup" class="qxgl" @on-cancel="cancelQxgl('qxglValidate')" v-model="qxglModal" :mask-closable="false" width="335">
                <p slot="header" style="color: #eeebeb;">
                    <span>查看日志</span>
                </p>
                <div class="qxglbody">
                    <Form ref="qxglValidate" :model="qxglValidate" label-position="left" :label-width="80">
                        <Row>
                            <i-col style="padding-top: 8px">
                                <Form-item label="操作人:" prop="people">
                                    <span>{{qxglValidate.people}}</span>
                                </Form-item>
                            </i-col>
                            <i-col>
                                <Form-item label="操作动作:" prop="people">
                                    <span>{{qxglValidate.people}}</span>
                                </Form-item>
                            </i-col>
                            <i-col>
                                <Form-item label="操作前数据:" prop="people">
                                    <span>{{qxglValidate.people}}</span>
                                </Form-item>
                            </i-col>
                            <i-col>
                                <Form-item label="操作后数据:" prop="people">
                                    <span>{{qxglValidate.people}}</span>
                                </Form-item>
                            </i-col>
                            <i-col style="padding-bottom: 8px">
                                <Form-item label="IP:" prop="people">
                                    <span>{{qxglValidate.people}}</span>
                                </Form-item>
                            </i-col>
                        </Row>
                    </Form>
                </div>
                <div slot="footer"></div>
            </Modal>
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow" stripe border :columns="qxglColumns" ref="qxglData" :data="qxglData"></Table>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {Loading},
        data () {
            return {
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                modal_loading: false,
                qxglModal:false,//详情
                logForm:{//条件搜索
                    people:'',
                    time:''
                },
                time0ptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                qxglData:[],//日志管理数据
                //日志管理格式
                qxglColumns:[
                    {
                        width:'6%',
                        title: '序号',
                        type:'index'
                    },
                    {
                        width:'12%',
                        title: '操作人',
                        type:'index'
                    },
                    {
                        width:'14%',
                        title: '操作动作',
                        type:'index'
                    },
                    {
                        width:'14%',
                        title: '操作前数据',
                        type:'index'
                    },
                    {
                        width:'14%',
                        title: '操作后数据',
                        type:'index'
                    },
                    {
                        width:'14%',
                        title: 'IP',
                        type:'index'
                    },
                    {
                        width:'14%',
                        title: '操作时间',
                        type:'index'
                    },
                    {
                        width:'12%',
                        title: '操作',
                        type:'id',
                        render: (h, params) => {
                            return h('div', [
                                h('Button',
                                    {
                                        class:"error blue",
                                        on: {
                                            click: () => {
                                                this.showLog(params.row.id)
                                            }
                                        }
                                    }, [
                                        h('i', {
                                            class : 'iconfont icon-chakan'
                                        }),
                                        h("span",'查看')
                                    ])
                            ]);
                        }
                    }
                ],
                qxglValidate:{
                    people:''
                }
            }
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth > 1600){
                this.pageSize = 20;
            }
            this.qxglData = this.qxglTableData(this.searchFrom,this.currentPage,this.pageSize)
        },
       /* mounted() {
            $("#rightWidth").css({width:(window.innerWidth - 180)+"px"});
        },*/

        mounted() {
        },

        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            qxglTableData (searchFrom,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var arr = [];
                this.$http.get('/src/mock/log.json').then(data => {
                    this.total=data.body.data.length;
                    this.pageTotal=Math.ceil(data.body.data.length / pageSize);
                    arr = data.body.data.slice((currentPage-1)*pageSize, currentPage*pageSize);
                    this.qxglData = arr;
                    this.spinShow=false;
                    this.tableShow = true;
                }, response => {
                    // error callback
                });
            },
            //条件查询
            logSearch(){
                this.currentPage = 1;
                this.qxglData = this.qxglTableData(this.searchFrom,this.currentPage,this.pageSize);
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.qxglData = this.qxglTableData(this.searchFrom,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.qxglData = this.qxglTableData(this.searchFrom,this.currentPage,this.pageSize);
            },
            //查看日志管理
            showLog(column) {
                this.qxglModal=true;
                this.$http.get('/src/mock/log.json').then(data => {
                    var arr = data.body.data;
                    for(var i in arr){
                        if(arr[i].action == column)　{
                            this.qxglValidate = arr[i];
                        }
                    }
                }, response => {
                    // error callback
                });
            },
            //关闭查看弹窗
            cancelQxgl(name) {
                this.qxglModal = false;
                this.$refs[name].resetFields();
            },
        }
    }
</script>